<template>
	<view class="login">
		<view class="center logo-box">
			<image src="../../static/imgs/logo.png" mode=""></image>
		</view>
		<view class="items-p">
			<view class=" item">
				<view class="label">
					用户名/学号：
				</view>
				<view class="content">
					<input type="text" value="" placeholder="请输入用户名/学号" v-model="userInfo.userName" />
				</view>
			</view>
			<view class=" item">
				<view class="label">
					密码：
				</view>
				<view class="content">
					<input type="text" value="" placeholder="请输入密码" v-model="userInfo.password" />
				</view>
			</view>
			<view class="item">
				<radio-group class="centerY" @change="changeTeacher">
					<label class="centerY radio-label">
						<radio style="transform:scale(0.7)" value="1" checked />老师登录
					</label>
					<label class="centerY">
						<radio style="transform:scale(0.7)" value="0" />学生登录
					</label>
				</radio-group>
			</view>
			<view class="login-btn center click" @click="loginFn">
				登录/注册
			</view>
		</view>
		<!-- 弹窗 -->
		<Modal :show.sync="isShow">
			<view class="yanzm">
				<view class="title">
					因为您是第一次登录需要使用验证码注册
				</view>
				<view class="input">
					<input type="text" value="" placeholder="验证码为五位任意字符" maxlength="5" />
				</view>
			</view>
		</Modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isTeacher: 1,
				isShow: false,
				userInfo:{
					userName:'admin',
					password:'123'
				}
			};
		},
		methods: {
			loginFn() {
				if(this.userInfo.userName == 'admin' && this.userInfo.password == '123'){
					console.log(555)
					uni.setStorageSync('token','admin')
					this.$goPage('/pages/teacher/index/index','tab')
					return
				}
				if (this.isTeacher == 0) {
					console.log('5')
					this.isShow = true
				} else {
					this.$msg('教师资格审核中...', true)
				}
			},
			changeTeacher(val) {
				this.isTeacher = val.detail.value
				console.log(val.detail.value)
			}
		}
	}
</script>

<style lang="scss" scoped>

	.logo-box {
		image {
			width: 160rpx;
			height: 120rpx;
		}

		margin-bottom: 40rpx;
	}

	.login {
		height: 100%;
		padding-top: 20%;
		background-color: #eee;

		.yanzm {
			width: 80%;
			padding: 35rpx;
			border-radius: 12rpx;
			background-color: white;
		}
	}

	.items-p {
		padding: 25rpx 40rpx;

		.login-btn {
			background-color: $mainColor;
			color: white;
			height: 85rpx;
			border-radius: 12rpx;
		}

		.item {
			margin-bottom: 25rpx;
			font-size: 24rpx;



			::v-deep {
				.uni-radio-input {
					border-radius: 30% !important;
				}
			}

			.label {
				margin-bottom: 10rpx;
			}

			.radio-label {
				margin-right: 20rpx;
			}
		}

	}

	input {
		border: 1rpx solid $mainColor;
		padding: 15rpx;
		border-radius: 8rpx;
		height: 70rpx;
		font-size: 24rpx;
	}

	.yanzm {
		.title {
			margin-bottom: 10rpx;
			font-size: 24rpx;
		}
	}
</style>
